<template>
  <div class="page light">
    <header class="nav-bar" :style="{'background-color':'rgba(255,255,255,'+navBarAlpha+')'}">
      <div class="left">
        <div class="back" @click="close"></div>
      </div>
      <div class="right" v-if="self_admin">
        <div class="share" @click="share"></div>
      </div>
      <!--<div class="title">{{userInfo.nickname||'未知用户'}}</div>-->
    </header>

    <div class="header"
         :style="{'background-image': 'url(http://n.wenshendaka.com/static/img/bg_user.png)',height:topBannerHeight+'px'}">
      <div class="shade"></div>
    </div>

    <div class=" group m-b">
      <div class="row b-b">
        <div class="block  header-extra">
          <div class="user-info">
            <div class="avatar-container">
              <div class="avatar-wrap">
                <div class="avatar" :style="{'background-image': 'url('+userInfo.avatar+')'}">

                </div>
              </div>
            </div>
            <div class="user-row">
              <div class="user-wrap">
                <div class="nickname">{{userInfo.nickname}}</div>
                <div class="user-badge-else" v-if="userInfo.sector==30 && !userInfo.v" @click="goToRezheng">
                  <u>未认证</u>
                </div>
                <div class="user-badge-wrap" @click="goToRezheng">
                  <!--<template v-for="badge of badges">-->
                  <!--<img class="user-badge" v-if="userInfo[badge.id]"-->
                  <!--:src="  'http://n.wenshendaka.com/static/img/'+badge.icon+'.png'"/>-->
                  <!--</template>-->
                  <img class="user-badge" v-if="getIcon(userInfo)"
                       :src="  'http://n.wenshendaka.com/static/img/'+getIcon(userInfo)+'.png'"/>
                </div>
              </div>
            </div>
            <div class="follow"><span @click="goFollowings">关注{{userInfo.following_count}}</span><span
              @click="goFollowers">粉丝{{userInfo.follower_count}}</span>
              <div v-if="self_admin">userId:{{userInfo.userId}}</div>
            </div>
          </div>
        </div>
      </div>

      <div class="block row nav-container h w-100 font-s" :class="[isNavFix?'nav-fix':'']"
           :style="{'top':isNavFix&&isAndroid?'48px':''}">
        <template v-for="nav of navs">
          <div class="nav " @click="selected = nav.id " v-if="nav.id=='products'? userInfo.sector == 30:true">
            {{nav.title}}
            <div class="indicator" v-if="nav.id == selected"></div>
          </div>
        </template>
      </div>
    </div>

    <div v-if="selected == 'info'" class="info font-s">
      <template v-if="userInfo.sector!=30">
        <div class="group ">
          <div class="row p-h b-b faith">
            <label>签名</label><span class="content">{{userInfo.faith||'ta很懒啥也没写'}}</span>
          </div>
          <div class="row h-l-m p-h b-b">
            <label>性别</label><span class="content">{{userInfo.gender|gender}}</span>
          </div>

          <div class="row h-l-m p-h b-b">
            <label>所在地</label><span class="content">{{userInfo.city|parseCity}}</span>
          </div>
        </div>
      </template>
      <template v-else>
        <div class=" row font-s renzheng m-b p-l">
          <label>认证情况</label>

          <div class=" badge" v-for="badge of badges" :class="[isBadgeOn(badge.id,userInfo)?'on':'']"
               @click="clickBadge(badge)">
            <img v-if="badge.icon"
                 :src="'http://n.wenshendaka.com/static/img/'+badge.icon+  (isBadgeOn(badge.id,userInfo)?'':'_un')+ '.png'">
            <span> {{getBadgeTile(badge)}}</span>
          </div>
        </div>
        <div class=" group m-b">
          <div class="row  h-l-m p-h b-b">
            <label>真实姓名</label><span class="content">{{userInfo.name||'未填写'}}</span>
          </div>
          <div class="row b-b faith">
            <label>签名</label><span class="content">{{userInfo.faith||'ta很懒啥也没写'}}</span>
          </div>
        </div>

        <div class=" group m-b">
          <div class="row  h-l-m p-h b-b" @click="goToCompany">
            <label>所在机构</label><span class="content">{{getCompanyName()}}</span>
            <div class="more" v-if="userInfo.company&&userInfo.company._id"></div>
          </div>
          <div class="row  h-l-m p-h b-b">
            <label>所在地</label><span class="content">{{userInfo.city|parseCity}}</span>
          </div>
          <div class=" row font-s gallery m-b " v-if="pics && pics.length >0">
            <label class="label-title">店内环境</label>
            <div class="items" @click="goToCompany">
              <div class="item" v-for="pic in pics"
                   :style="{height:getFeedsImgLen(pics)+'px',width:getFeedsImgLen(pics)+'px','margin-right':isRightSide(pics,$index)?'':'1px','background-image':'url('+pic+')','background-size': 'cover'}">
                <!--<img :src="processImgUrl(pic)">-->
              </div>
            </div>
          </div>
        </div>

        <div class="group">
          <div class="row  h-l-m p-h b-b">
            <label>从业年限</label><span class="content">{{userInfo.workYear}}年</span>
          </div>
          <!--<div class="row  h-l-m p-h b-b">-->
          <!--<label>微信</label><span class="content">{{userInfo.wxNum}}</span>-->
          <!--</div>-->
        </div>
      </template>
    </div>

    <div v-if="selected == 'products'">
      <feeds :feeds="products" :user-info="userInfo" @load-more="loadMoreProduct" :can-more="true" :type="2"
             :finish.sync="isProductsFinish"></feeds>
    </div>

    <div class="feeds container" v-show="selected == 'feeds'">
      <feeds :feeds="feeds" :user-info="userInfo" @load-more="loadMoreFeed" :can-more="true"
             :finish.sync="isFeedsFinish"></feeds>
    </div>

    <footer class="tab-bar">
      <div class="tab-wrap" v-if="userInfo.sector == 30">
        <div class="tab" @click="goOrder">
          预约
        </div>
      </div>
      <div class="tab-wrap" :class="[!userInfo.isFollowed?'':'primary']" v-if="userInfo.sector == 30">
        <div class="tab" @click="goChat">
          私信
        </div>
      </div>

      <div class="tab-wrap" :class="'primary'" v-else>
        <div class="tab" @click="goChat">
          私信
        </div>
      </div>

      <div class="tab" :class="[userInfo.isFollowed?'':'primary']" @click="follow" v-if="userInfo.sector == 30">
        {{this.userInfo.isFollowed?'已关注':'关注'}}
      </div>

      <div class="tab" @click="follow" v-else>
        {{this.userInfo.isFollowed?'已关注':'关注'}}
      </div>
    </footer>

    <guide-auth :show.sync="showGuide" @go-auth="goToRezheng"></guide-auth>

  </div>
</template>

<script type="text/babel">
  import Feeds from './Feeds.vue'
  import user from '../api/user'
  import feeds from '../api/feeds'
  import {badges, isBadgeOn, clickBadge} from '../model/user'
  import guideAuth from './GuideAuth.vue'

  export default{
    components: {
      Feeds, guideAuth
    },
    data(){
      return {
        navs: [
          {
            title: 'Ta的动态',
            id: 'feeds'
          },
          {title: '作品集', id: 'products'},
          {title: '个人信息', id: 'info'}
        ],
        selected: '',
        inited: {},//已经初始化过的tab
        topBannerHeight: document.body.clientWidth * 200 / 375,
        badges: badges,

        scrollTop: 0,

        userInfo: {
          userId: '163385',
          nickname: '',
          topBanner: 'http://n.wenshendaka.com/static/img/bg_user.png'
        },

        feeds: [],
        products: [],
        isProductsFinish: false,
        isFeedsFinish: false,
        isAndroid: bridge.isAndroid,

        pics: [],

        self_isTattoo: false,
        self_tattoo_v: false,
        self_admin: false,
        self_data: false,

        showGuide: false
      }
    },
    computed: {
      isNavFix(){
        return this.scrollTop >= (85 + this.topBannerHeight);
      },

      navBarAlpha(){
        return this.scrollTop / (85 + this.topBannerHeight);
      }
    },
    watch: {
      selected(id){
        if (this.inited[id])
          return;

        if (id == 'feeds') {
          feeds.getFeedsByUserId(this.$route.params.userId).then((obj) => {
            if (obj.code == 0) {
              this.inited[id] = true;
              this.feeds = obj.data;
              if (!obj.data || obj.data.length < 10)
                this.isFeedsFinish = true;
            }
          });
        } else if (id == 'products') {
          feeds.getProductsByUserId(this.$route.params.userId).then((obj) => {
            if (obj.code == 0) {
              this.inited[id] = true;
              this.products = obj.data;
              if (!obj.data || obj.data.length < 10)
                this.isProductsFinish = true;
            }
          });
        }
      }
    },

    ready: function () {
      wsdk.setOnScroll((x, y)=> {
//        this.scrollTop = y;
      });
    },

    route: {
      data(transition){
        user.getUserInfo(this.$route.params.userId).then((obj) => {
          if (obj.code == 0) {
            this.userInfo = obj.data;

            if (this.userInfo.sector == 30 && this.userInfo.company_v) {
              this.pics = this.userInfo.companyInfo.environment.slice(0, 3);
            }

            this.selected = 'feeds';
          }
          transition.next();
        });

        if (this.$route.params.self_v) {
          this.self_data = true;
        }

        if (this.$route.params.self_sector == 30) {
          //纹身师
          this.self_isTattoo = true;
          if (this.$route.params.self_v == 1) {
            //认证纹身师
            this.self_tattoo_v = true;
          }
        } else {
          this.badges = [
            {
              title: '服务保障计划',
              id: 'bao',
              icon: 'img_badge_bao',
              page: {
                url: 'signTattoo',
                type: pageType.NATIVE
              }
            },
            {
              title: '实名认证',
              id: 'realName',
              icon: 'img_badge_realname',
              page: {
                url: 'realName',
                type: pageType.NATIVE
              }
            },
            {
              title: '',
              id: '',
              icon: null,
              page: {
                url: 'realName',
                type: pageType.NATIVE
              }
            }
          ];
        }

        if (this.$route.params.self_role == 120) {
          this.self_admin = true;
        }
      }
    },

    methods: {
      isBadgeOn,
      clickBadge (badge) {
        if (this.self_isTattoo) {
          if (badge.id == 'realName') {
            return wsdk.toast(this.userInfo[badge.id] ? '已认证身份证信息' : '未认证身份证信息!');
          }
          // else if (badge.id == 'bao') {
          //   //badge.page.url = 'http://mp.weixin.qq.com/s?__biz=MzIwMTI1NDI3NQ==&mid=502677777&idx=1&sn=0eef807f0fdfeb4c03f94c335fe00d3b&scene=0&previewkey=KYTqD0fpc2NmUYC1DC4Pcp1iJUUG%2F7eLf7OA%2FVEtaJE%3D';
          // }
        } else {
          badge.page.url = 'companyApplication';
        }

        wsdk.go(badge.page);
      },

      getBadgeTile(badge){

        if (badge.id == 'realName') {
          if (this.userInfo[badge.id])
            return '已实名认证';
          else
            return '未认证实名';
        } else if (badge.id == 'bao') {
          if (this.userInfo[badge.id])
            return '服务有保障';
          else
            return '服务未认证';
        } else if (badge.id == 'handicraft') {
          if (this.userInfo[badge.id])
            return '已认证手艺';
          else
            return '手艺未认证';
        }

      },

      goOrder(){
        wsdk.go({
          url: 'toOrder', type: pageType.NATIVE, params: {
            userId: this.$route.params.userId
          }
        });
      },
      goChat(){
        if (this.userInfo.sector == 30 || !this.self_data || !this.self_isTattoo) {
          wsdk.go({
            url: 'chat', type: pageType.NATIVE, params: {
              userId: this.$route.params.userId
            }
          });
        } else {
          if (this.self_isTattoo && this.self_tattoo_v) {
            wsdk.go({
              url: 'chat', type: pageType.NATIVE, params: {
                userId: this.$route.params.userId
              }
            });
          } else {
            this.showGuide = true;
          }
        }
      },
      goCompany(){
        wsdk.go({url: 'company', type: pageType.NATIVE});
      },

      goFollowings(){
        wsdk.go({url: 'following', type: pageType.NATIVE, params: {userId: this.$route.params.userId + ''}});
      },

      goFollowers(){
        wsdk.go({url: 'follower', type: pageType.NATIVE, params: {userId: this.$route.params.userId + ''}});
      },

      loadMoreFeed(done){
        if (this.selected == 'feeds')
          feeds.getFeedsByUserId(this.$route.params.userId, this.feeds.length > 0 ? this.feeds[this.feeds.length - 1].updated : '').then((obj) => {
            if (obj.code == 0) {
              if (!obj.data || obj.data.length == 0)
                return done(true);
              else
                obj.data.forEach((feed)=>this.feeds.push(feed));
            }
            done()
          });
      },

      loadMoreProduct(done){
        if (this.selected == 'products')

          feeds.getProductsByUserId(this.$route.params.userId, this.products.length > 0 ? this.products[this.products.length - 1].updated : '').then((obj) => {
            if (obj.code == 0) {
              if (!obj.data || obj.data.length == 0)
                return done(true);
              else
                obj.data.forEach((product)=>this.products.push(product));
            }
            done()
          });
      },

      close(){
        wsdk.close();
      },

      follow(){
        if (!this.userInfo.isFollowed)
          feeds.follow(this.$route.params.userId).then((res)=> {
            if (res.code == 0) {
              this.userInfo.isFollowed = true;
            }
          });
        else feeds.unfollow(this.$route.params.userId).then((res) => {
          if (res.code == 0) {
            this.userInfo.isFollowed = false;
          }
        });
      },

      goToCompany(){
        if (this.userInfo.company && this.userInfo.company._id) {
          wsdk.go({
            url: 'company', type: pageType.NATIVE, params: {
              companyid: this.userInfo.company._id + ''
            }
          });
        }
      },
      getCompanyName(){
        //userInfo.company&&userInfo.company.name||'未填写'
        if (this.userInfo.companyInfo)
          return this.userInfo.companyInfo.name ? this.userInfo.companyInfo.name : this.userInfo.company.name || '未填写';

        if (this.userInfo.company)
          return this.userInfo.company.name || '未填写';
      },

      getFeedsImgLen: function (pics) {
        var space = 30;
        var totalLen = document.body.clientWidth - 20;
        return (totalLen - space * 2) / 3;
      },

      isRightSide(pics, index){
        index++;
        return index % 3 == 0;
      },

      processImgUrl(url){

        url += '?imageView2/1/w/' + this.getFeedsImgLen() + '/format/jpg/interlace/1';

        return url;
      },

      goToRezheng(){
        wsdk.go({
          url: 'realName', type: pageType.NATIVE, params: {}
        });
      },
      getIcon(userInfo){

        if (userInfo.bao == 1) {
          return 'img_badge_bao';
        }
        if (userInfo.handicraft == 1) {
          if (this.self_isTattoo) {
            return 'img_badge_v';
          } else {
            return 'img_badge_realname';
          }
        }
        if (userInfo.realName == 1) {
          return 'img_badge_realname';
        }

        return null;
      },
      share(){
        wsdk.share({
          title: this.userInfo.nickname + '的纹身作品集',
          content: '我的作品都在里面快来看看吧！',
          sharedURL: 'http://m.meizhanggui.cc/wsdk/?storeId=' + this.userInfo.userId + '#!/card/',
          shareImg: this.userInfo.avatar
        });
      },
    }
  }
</script>

<style lang="less" scoped>
  @import "../../static/less/compatible.less";
  @import "../../static/less/globel.less";

  .page {
    margin-top: 0;
  }

  .header {
    height: 200px;
    background-size: cover;
  }

  .header-extra {
    height: 85px;
  }

  .follow {
    font-size: 9px;
    color: #969696;
  }

  .follow > span {
    margin: 6px 5px;
    display: inline-block;
  }

  .follow > div {
    position: absolute;
    float: right;
    margin: 6px 50px;
    display: inline-block;
  }

  .nickname {
    margin-top: 5px;
  }

  .user-badge-else {
    margin-top: 8px;
    margin-left: 10px;
    text-align: center;
    position: absolute;
    font-size: 9px;
    color: #ff731e
  }

  .user-info {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    width: 100%;
    margin-top: -35px;
    position: absolute;
    text-align: center;
  }

  .avatar-wrap {
    height: 70px;
    width: 70px;
    border-radius: 35px;
    background-color: #fff;

    display: -webkit-box;
    -webkit-box-pack: center;
    -webkit-box-align: center;
  }

  .avatar-container {
    width: 100%;
    display: -webkit-box;
    -webkit-box-pack: center;
  }

  body {
    margin-bottom: 59px;
  }

  .nav-container {
    .flex();
    .justify-content(center);
  }

  .nav {
    width: 60px;
    height: 100%;
    margin: 0 10px;
    display: -webkit-box;
    -webkit-box-pack: center;
    -webkit-box-align: center;
    -webkit-box-orient: vertical;
    position: relative;
  }

  .info label {
    width: 70px;
  }

  .badge {
    width: 90px;
    height: 100%;

    .flex-grow(1);

    -webkit-box-pack: center;
    -webkit-box-align: center;
    -webkit-box-direction: normal;
    -webkit-box-orient: vertical;
    display: -webkit-box;
  }

  .badge > img {
    width: 60px;
    height: 20px;
    margin-bottom: 5px;
  }

  .badge > * {
    display: block;
  }

  .user-wrap {
    margin-top: 5px;
    text-align: center;
    position: relative;
  }

  .user-wrap > * {
    display: inline-block;
  }

  .user-badge-wrap {
    position: absolute;
    margin-left: 5px;
    margin-top: 5px;
  }

  .user-badge-wrap > * {
    width: 42px;
    height: 15px;
    display: inline-block;
    background-size: contain;
  }

  .user-badge {
    padding: 0 2px;
  }

  .space {
    height: 30px;
    width: 1px;
    background-color: #777;
  }

  .renzheng {
    height: 68px;
    .flex();
    .justify-content(center);
    .align-items(center);
  }

  .gallery {
    height: 120px;
    .flex();
    .justify-content(center);
    .align-items(center);
  }

  .items {
    height: 100%;
    .flex-grow(1);
    -webkit-box-pack: center;
    -webkit-box-align: center;
    display: -webkit-box;
    padding-right: 20px;
  }

  .item {
    .flex-grow(1);
    -webkit-box-pack: center;
    -webkit-box-align: center;
    display: -webkit-box;
  }

  .item > img {
    width: 100%;
    height: 100%;
  }

  .content {
    width: calc(~ '100% - 90px');
    vertical-align: middle;
  }

  .faith {
    min-height: 30px;
    padding: 10px;
  }

  .faith > label {
    line-height: 30px;
    vertical-align: top;
  }

  .nav-fix {
    position: fixed;
    top: 60px;
    left: 0;
    border-bottom: 1px solid @border-color;
    border-top: 1px solid @border-color;
  }

  .back {
    background-image: url(../../static/img/ic_user_back.png);
    background-size: 25px 25px;
    background-repeat: no-repeat;
    background-position: 10px;
  }

  .shade {
    height: 100%;
    background-image: url(../../static/img/shade_user.png);
    background-size: contain;
  }

  .img {
    background-color: #f5f5f5;
  }

  .label-title {
    margin-left: 10px;
  }

  .share {
    background-image: url(../../static/img/ic_share.png);
    width: 35px;
    height: 100%;
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: 10px;
  }
</style>
